<div class="modal-header">
    <h3 class="modal-title">Kubernetes服务信息</h3>
</div>
<div class="modal-body">
    <form class="bs-example form-horizontal">
        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label">服务名</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" placeholder="服务器名称" required ng-disabled="true"
                           ng-model="service.name">
                </div>
            </div>
        </div>

        <div class="form-group">

            <div class="col-md-6">
                <label class="col-lg-4 control-label">服务类型</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" required ng-disabled="true" ng-model="service.serviceType">
                </div>
            </div>

            <div class="col-md-6">
                <label class="col-lg-4 control-label">集群IP</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" required ng-disabled="true" ng-model="service.clusterIP">
                </div>
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-6">
                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>绑定服务器组</label>
                <div class="col-lg-8">
                    <ui-select ng-model="nowServerGroup.selected" theme="bootstrap"
                               ng-change="changeServerGroup(nowServerGroup.selected)">>
                        <ui-select-match placeholder="搜索服务器组名称......">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices refresh="queryServerGroup($select.search)" refresh-dalay="0"
                                           repeat="item in serverGroupList | filter: $select.search">
                            <div ng-bind-html="item.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <button ng-click="removeServerGroup()"
                    class="btn btn-xs"
                    style="margin-top: 5px; background-color: #ff8700; color: white;">
                <span class="glyphicon glyphicon-remove"></span>移除
            </button>
        </div>

        <div class="form-group">

            <div class="col-md-12">
                <label class="col-lg-2 control-label">端口列表</label>
                <div class="col-lg-10" style="margin-top: 5px;">
                    <div class="col-md-12" style="margin-top: 5px;" ng-repeat="servicePort in service.servicePortList">
                        <span class="label" style="background-color: #00a8f3; color: white;">{{servicePort.name}}</span>
                        <span class="label" style="background-color: #777; color: white;"
                              ng-if="servicePort.nodePort !=0">NodePort:{{servicePort.nodePort}}</span>
                        <span class="label" style="background-color: #777; color: white;"
                              ng-if="servicePort.port !=0">Port:{{servicePort.port}}</span>
                        <span class="label" style="background-color: #777; color: white;"
                              ng-if="servicePort.targetPort !=0">TargetPort:{{servicePort.targetPort}}</span>
                    </div>
                </div>
            </div>


        </div>


        <div class="form-group">
            <div style="text-align:center;">
                <!--保存-->
                <button ng-click="saveService()"
                        class="btn btn-xs"
                        style="background-color: #2e6da4; color: white;">
                    <span class="glyphicon glyphicon-ok"></span>保存
                </button>

                <button class="btn btn-xs"
                        style="margin-left: 5px; background-color: #ff8700; color: white;"
                        ng-click="closeModal()">关闭
                </button>

            </div>
        </div>
    </form>
    <div ng-if="alert.type != ''">
        <div uib-alert ng-class="'alert-' + alert.type" close="closeAlert()">{{alert.msg}}</div>
    </div>
</div>